<template>
  <div class="bg">
    <h2 class="biao">品牌馆</h2>
    <ul>
      <li v-for="(item, index) in detail" :key="index">
        <div class="top">
          <div class="bigimg">
            <img :src="item.showUrls[0]" alt="" />
          </div>
          <div class="logoimg">
            <img :src="item.brandLogoUrl" alt="" />
          </div>
        </div>

        <p class="brand">{{ item.brandName }}</p>
        <p class="brale">近期有{{ item.onSaleProjectCount }}场演出</p>
      </li>
    </ul>
  </div>
</template>

<script setup>
import axios from "@/api/axios.js";
import { ref } from "vue";
const getDetail = () =>
  axios.get(
    "https://show.maoyan.com/maoyansh/myshow/ajax/brand/query?uuid=6074gamvnhk0bxpwvnzz95oqxeid9zl8z9wj1oj30cx8b20hrh1xknvnoxm2jyn7&clientType=1&os=1&sellChannel=13&cityId=1&lng=0&lat=0",
    {}
  );
const detail = ref([]);

async function update() {
  const { data } = await getDetail();
  detail.value = data.data;
  // console.log("品牌detail", detail);
  // return detail;
}
update();
</script>

<style lang="scss" scoped>
img{
  width: 100%;
  height: 100%;
  display: block;
}
.bg {
  width: 100%;
  .biao{
    font-size: 18rem;
    font-weight: 600;
    margin-top: 3rem;
    margin-left: 5rem;
  }
}
ul {
  display: flex;
  padding: 5rem;
}
li {
  width: 124rem;
  height: 125rem;
  padding: 5rem;
  margin-left: 5rem;
  border-radius: 12rem;
  background-color: #fff;
  .top {
    padding: 15rem 1rem 0 10rem;
    display: flex;
    background-color: #fff5ef;
    .bigimg{
      width: 35rem;
      height: 45rem;
      img{
        border-radius: 7rem 7rem 0 0;
      }
    }
    .logoimg{
      width: 26rem;
      height: 26rem;
      margin: 24rem 0 0 40rem;
      img{
        border-radius: 7rem 0 0 0;
      }
    }
  }
  .brand{
    font-size: 12rem;
    font-weight: 600;
    padding: 9rem 0 0 10rem;
  }
  .brale{
    font-size: 12rem;
    color: #999;
    padding: 9rem 0 5rem 10rem;
    margin-bottom: 5rem;
  }

  p {
    width: 120rem;
  }
}
</style>
